<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内外</title>
    <style>
        div{
            border:1px solid red;
        }
        .cls1{
             width:100px;
             height:100px;
             <!--外边距 margin:48px-->
        }
        .cls2{
            width:200px;
            height:200px;
            padding:48px;
            /*内边距*/
            /*
            设置盒子的属性,让width和height为我们要的大小
            */
            box-sizing:border-box;

        }
        /*浮动属性 float*/
        .cls3{
        float:left;
        }
        .cls4{
            float:left;
        }
        .cls5{
            float:left;
        }
    </style>
</head>
<body>
<div class="cls2">
    <div class="cls1">
    </div>
    <div class="cls3">111</div>
    <div class="cls4">222</div>
    <div class="cls5">333</div>
</div>
</body>
</html>